<template>
<div>
  <div  class="top">
    <h4>我看过的书籍</h4>
  </div>
     <div class="w2">
        <div class="tit">
            <p></p>
            <h4>读万卷书，行万里路</h4>
        </div>
        <div class="content">
           <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="在读（8）" name="first">在读（8）
      <div class="item">
      <div class="book">
                            <img src="../assets/images/27.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/25887915/" target="_blank">死屋手记</a><br>
                                <span>[俄] 费奥多尔·陀思妥耶夫斯基 / 娄自良 / 上海译文出版社 / 2015-1 / 45.00</span>
                                <span>2022-06-10在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/20.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/2970792/" target="_blank">契诃夫小说全集(第9卷)</a><br>
                                <span>契诃夫/汝龙/上海译文出版社/2008-1/30.00元</span>
                                <span>2022-07-01在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/22.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/25908550/" target="_blank">历史的终结与最后的人</a><br>
                                <span>[美] 弗朗西斯·福山 / 陈高华、孟凡礼 校 / 广西师范大学出版社 / 2014-9 / 78.00元</span>
                                <span>2022-06-29在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/25.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/27087503/" target="_blank">深度学习</a><br>
                                <span>  [美] 伊恩·古德费洛、[加] 约书亚·本吉奥、[加] 亚伦·库维尔 / 赵申剑、黎彧君、符天凡、李凯 / 人民邮电出版社 / 2017-7-1 / 168</span>
                                <span>2022-07-11在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/23.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/26907972/" target="_blank">现代日本史</a><br>
                                <span>[美] 安德鲁·戈登 / 李朝津 / 中信出版社 / 2017-11 / 78.00元</span>
                                <span>2022-07-16在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/24.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/3130479/" target="_blank">蠟筆小新2</a><br>
                                <span>臼井儀人 / 錢亞東 / 東立 / 1994-8-15 / 100元</span>
                                <span>2022-06-01在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/26.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/30269564/" target="_blank">江户时代</a><br>
                                <span>北岛正元 / 米彦军 / 新星出版社 / 2019-4-1 / 49元</span>
                                <span>2022-07-01在读</span>
                            </div>
                        </div>
                        <div class="book">
                            <img src="../assets/images/28.png">
                            <div class="profile">
                                <a href="https://book.douban.com/subject/35088148/" target="_blank">日本武士史</a><br>
                                <span>[日]高桥昌明 / 黄霄龙 / 社会科学文献出版社 / 2020-9 / 59.00</span>
                                <span>2022-05-22在读</span>
                            </div>
                            </div>
                        </div>
    </el-tab-pane>
    <el-tab-pane label="想读（7）" name="second">想读（7）</el-tab-pane>
    <el-tab-pane label="已读（7）" name="third">已读（7）</el-tab-pane>
  </el-tabs>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'Hobby',
    data(){
      return{
        activeName:'first'
      }
    }
}
</script>

<style scoped>
    .top {
    height: 420px;
    background-image: url("../assets/images/8.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-top: 160px;
}
.top h4 {
    text-align: center;
    font-size: 50px;
}
.w2 {
    border: 1px solid rgb(179, 177, 177);
    margin: 50px auto; 
    width: 1000px;
    height: 1600px;
    border-radius: 2%;
    box-shadow: -5px -5px 16px rgb(222, 221, 221);
}
.w2 p{
    float: left;
    width: 6px;
    height: 58px;
    background-color: skyblue;
    margin-right: 20px;
}
.w2 .tit {
    display: block;
    width: 900px;
    height: 58px;
    border-radius: 1%;
    line-height: 58px;
    margin: 50px auto;
    background-color: rgb(198, 226, 237);
    color: rgb(104, 101, 101);
}
.tit h4{
    float: left;
    font-size: 16px;
    font-weight: 300;
}
.content{
    width: 900px;
    margin: 0 auto;
    margin-top: -30px;
}
.item .book{
    border-bottom: 1px solid rgb(189, 187, 187);
    height: 170px;
    padding-top: 10px;
}
.book img{
    float: left;
    width: 100px;
    height: 145px;
    margin-right: 30px;
}
.book .profile{
    float: left;
}
.book a{
    color: skyblue;
    font-size: 18px;
}
.book span{
    display: block;
    width: 400px;
    margin-top: 8px;
    color: gray;
}
 /* 图片经过放大 */
 img{
    overflow: hidden;
    transition: all 0.8s;
  }
  img:hover{
    transform: scale(1.1)
  }
</style>